<template>
    <div w-full flex-col class="swiper-wrapper">
        <div class="swiper-wrapper-container">
            <div
                h-550px
                w-790px
                absolute
                class="swiper-wrapper-container-banner"
            >
                <swiper
                    :slides-per-view="1"
                    :space-between="50"
                    direction="vertical"
                    :loop="true"
                    :autoplay="{ delay: 3000, disableOnInteraction: false }"
                    :modules="modules"
                >
                    <swiper-slide v-for="image in swiperImages" :key="image">
                        <a-image
                            :preview="false"
                            :width="790"
                            :height="610"
                            style="object-fit: cover"
                            :src="image"
                        />
                    </swiper-slide>
                </swiper>
            </div>
            <div class="swiper-wrapper-container-info">
                <div
                    class="mb-[23px] swiper-wrapper-container-info-title animate-trigger"
                >
                    ACEHEAL个性化精准营养定制
                </div>
                <div class="swiper-wrapper-container-info-desc animate-trigger">
                    根据不同人群、不同体质，结合不同生活饮食习惯、不同健康需求，制定个性化的精准营养方案
                </div>
                <a-popover placement="top" trigger="click">
                    <template #content>
                        <img :src="weixin_code" alt="">
                    </template>
                    <a-button
                        type="primary"
                        shape="round"
                        absolute
                        class="text-[20px] py-[10px] h-[52px] w-[160px] bottom-0 right-0"
                    >
                        开始定制
                    </a-button>
                </a-popover>
            </div>
        </div>
        <div w-full class="swiper-wrapper-footer"></div>
    </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/autoplay'

import swiper_1 from '../../assets/images/home/swiper_1.png'
import swiper_2 from '../../assets/images/home/swiper_2.png'
import swiper_3 from '../../assets/images/home/swiper_3.png'

import weixin_code from '../assets/images/weixin_code.png'

// 注册 Autoplay 模块
const modules = [Autoplay]

const swiperImages = [swiper_1, swiper_2, swiper_3]
</script>

<style lang="less" scoped>
.swiper-wrapper {
    height: 610px;
    background: linear-gradient(to right, #f5f4e7, #d3e4e9);
    &-container {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        height: 500px;
        &-banner {
            bottom: -110px;
            left: -112px;
            overflow: hidden;
            .swiper {
                width: 100%;
                height: 610px;
                .swiper-slide {
                    width: 790px !important;
                    height: 610px !important;
                }
            }
        }
        &-info {
            height: 241px;
            width: 578px;
            position: absolute;
            top: 130px;
            right: 0;
            &-title {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 300;
                font-size: 42px;
                color: #262626;
                line-height: 42px;
                text-align: left;
                font-style: normal;
            }
            &-desc {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 300;
                font-size: 20px;
                color: #97a0a2;
                line-height: 32px;
                text-align: justify;
                font-style: normal;
            }
        }
    }
    &-footer {
        height: 110px;
        background: radial-gradient(
            327% 357% at 14% -301%,
            #fcfcfc 0%,
            #eaeced 100%
        );
    }
}
</style>
